<template>
<el-dialog title=" " :visible.sync="dialogVisible" width="800px" append-to-body :close-on-click-modal="false">
  <div class="online-booking">
    <h1 class="tac fc-b1 fs-l mgb2">填写预约信息</h1>
    <el-form :model="model" status-icon :rules="rules" ref="form" label-width="80px" class="form-wai">
      <el-form-item label="姓名" prop="name">
        <el-input size='small' v-model="model.name" style="width: 400px;" autocomplete="off" :maxlength='10' show-word-limit clearable placeholder='请输入姓名'></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input size='small' v-model="model.phone" style="width: 400px;" autocomplete="off" :maxlength='11' show-word-limit clearable placeholder='请输入手机号'></el-input>
      </el-form-item>
      <el-form-item label="预约内容" prop="content">
        <el-input type="textarea" v-model="model.content" :rows='4' autocomplete="off" :maxlength='200' show-word-limit clearable placeholder='请输入预约内容'></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit" class="submit-btn">提 交</el-button>
    </span>

    <div class="tip tar mgt2">
      <span class="strong fc-b1">提交预约后，</span>
      <span class="strong primary">我们会尽快答复您~</span>
    </div>
  </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      rules: {
        name: [{ required: true, message: '姓名不能为空!', trigger: 'blur' }],
        phone: [
          { required: true, message: '手机号不能为空!', trigger: 'blur' },
          { pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,  message: '手机号不正确!', trigger: 'blur' }
        ],
        content: [{ required: true, message: '预约内容不能为空!', trigger: 'blur' }],
      },
      model: {},
    }
  },
  methods: {
    openDialog(obj) {
      this.dialogVisible = true
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let opts = {
            contact: this.model.phone,
            content: this.model.content,
            fk_user_id: this.$route.params.id,
            personname: this.model.name
          }
          console.log(opts)
          this.$api.sendBooking(opts).then(res => {
            console.log(res)
            if (res.code == 100) {
              this.$vgo.tip('提交成功', 'success')
            }
          })
          this.dialogVisible = false
          this.model = {}
        }
      })
    },
  }
}
</script>

<style lang="stylus" scoped>
.online-booking
  height 400px
  padding-top 10px
  .form-wai
    width 100%
    padding 0 150px
  .submit-btn
    width calc(100% - 600px)
    margin 0 300px 0 300px
  .tip
    padding 0 150px
</style>